<template>
	<view class="choosePackageCardPage">

		<view class="choosePackageCardList" v-if="packageCardInformation">



			<view class="packageCardArr" :style="{ '--bg-image': `url(${packageCardInformation.style})` }">
				<view class="flex-between "
					style="border-bottom: 1px solid rgba(255, 255, 255, 0.25);padding-bottom: 20rpx;">

					<image class="avatar" :src="packageCardInformation.logo" mode=""></image>

					<view class=" flex-column-between-start ">
						<text class="font-overflow centerText price font-weight_bold">
							{{packageCardInformation.name}}
						</text>
						<text class="font-overflow centerText price font-weight_bold">{{packageCardInformation.desc}}
						</text>

					</view>

					<view class="rechargeBtn flex">

					</view>

				</view>
				<view class="margin-top_20rpx">
					<text
						class="font-overflow centerText  priceText font-weight_bold margin-right_16rpx">已经使用{{packageCardInformation.total_num-packageCardInformation.num }}</text>
					<text
						class="font-overflow centerText  priceText font-weight_bold">未使用：{{packageCardInformation.num}}</text>
				</view>

			</view>
			<view class="nextBtn flex" @click="immediateDeduction()">
				立刻抵扣
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				searchVal: '',
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				// 购买套餐卡信息
				packageCardInformation: null,
				deductionType: null,
                isWriteOff:false,
				form: {
				    uid:'1',
					id: '6',
				
				}
			}
		},
		onLoad(options) {
            this.isWriteOff=false
			
   //          options={
			// 	rand_code: 'FNr8pS',
			// 	id: '6',
			// 	uid: '70'
			// }
			console.log(options)
			if (Object.keys(options).length) {
				this.$sun.assignObject(this.form, {
					...options
				})
				// console.log(options)
				this.userPackageInfoFn()
			}
			
			// 判断是否有token 没有token需要重新登录
			if (!uni.getStorageSync('login').token) {
				this.$sun.navRe('/pages/loginPage/index')
			}

		},
		onShow() {
			this.isWriteOff=false
			this.$at.releaseKey('submit');
			this.mescroll?.resetUpScroll();

		},
		methods: {
			changeInput(e) {
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			async userPackageInfoFn() {
				const result = await this.$http.post({
					url: this.$api.userPackageInfo,
					data: {
						id: this.form.id,


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					this.packageCardInformation = result.data

				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			async immediateDeduction() {
				if(!this.isWriteOff){
					this.$at.uniDoFunc({
						key: 'submit',
						success: async () => {
							this.$at.lockKey('submit');
							const result = await this.$http.get({
								url: this.$api.usePackage,
								data: {
									rand_code:this.packageCardInformation.rand_code,
									uid:this.form.uid,
									id:this.packageCardInformation.id
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}
					
							})
							if (result.code == 0) {
								this.packageCardInformation = result.data
								this.$sun.toast(result.msg, 'none')
								this.$at.releaseKey('submit');
								setTimeout(()=>{
									this.isWriteOff=true
									this.userPackageInfoFn()
								},500)
								
							} else {
								this.isWriteOff=false
								this.$sun.toast(result.msg, 'none')
								this.$at.releaseKey('submit');
							}
					
					
					
					
						}
					});
				}else{
					this.$sun.toast('该套餐卡已经核销,请扫码重试', 'none')
				}

			}



		}
	}
</script>

<style lang="less" scoped>
	.buyPackagePopupContain {
		background-color: #fff;
		height: 58vh;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 30rpx;

		.packagePop {
			margin-bottom: 30rpx;

			.packageTitle {
				width: 8rpx;
				height: 30rpx;
				background: rgb(255, 0, 0);
				margin-right: 10rpx;
			}
		}

		.packagePopConent {
			width: 212rpx;
			height: 146rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(255, 167, 167);
			border-radius: 20rpx;
			position: relative;
			background: rgb(255, 249, 249);

			.sign {
				padding: 8rpx;
				top: -10rpx;
				left: -10rpx;
				position: absolute;

				height: 40rpx;
				color: rgb(255, 255, 255);

				font-size: 24rpx;
				font-weight: 400;
				border-radius: 12rpx;

				background: rgb(255, 0, 0);
			}
		}

		.packageColor {
			color: rgb(255, 0, 0);
			font-size: 40rpx;
			font-weight: 600;
		}

		.packageColor-noActive {
			color: rgb(51, 51, 51);
			font-size: 40rpx;
			font-weight: 600;
		}

		.packagePopConent-noActive {
			width: 212rpx;
			height: 146rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			box-sizing: border-box;
			border: 1px solid rgb(225, 225, 225);
			border-radius: 10px;

			background: rgb(255, 255, 255);
		}

		.buyCard {
			border-radius: 154rpx;
			width: 600rpx;
			height: 88rpx;
			background: rgb(239, 93, 49);
			color: rgb(255, 255, 255);
			position: fixed;
			bottom: 20rpx;
			font-size: 32rpx;
			font-weight: 500;
			margin-left: 55rpx;
		}

	}

	.choosePackageCardPage {
		.withdrawalRecordsTop {

			background: rgb(255, 255, 255);

			padding: 34rpx;

			// border-radius: 130rpx;


			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;
				margin-right: 24rpx;
				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;
				width: 100%;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}

			}
		}

		.choosePackageCardList {
			padding: 30rpx;

			.nextBtn {
				position: fixed;
				bottom: 20rpx;
				width: 90%;
				height: 96rpx;
				background: rgb(0, 87, 254);
				color: rgb(255, 255, 255);
				margin-left: 10rpx;
			}

			.packageCardArr {
				position: relative;
				margin-bottom: 22rpx;
				padding: 25rpx 20rpx;
				height: 108px;
				border-radius: 20rpx;
				background-repeat: no-repeat;
				background-size: cover;

				background-image: (var(--bg-image));


				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;

				}

				.rechargeBtn {
					width: 110rpx;
					height: 52rpx;
					border-radius: 20rpx;

					background: transparent;
				}

				.centerText {
					width: 438rpx;
				}

				.price {
					color: #fff;
					font-size: 30rpx;
					font-weight: 700;
				}

				.priceText {
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 400;
				}
			}

			.packageCardArr::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				background: rgba(0, 0, 0, 0.1);
				/* 半透明黑色背景 */
			}
		}

	}

	page {
		background: #f6f6f6;
	}
</style>